<template>
    <Navbar/>
<button
 
    open-type=""
    hover-class="button-hover"
    @click="user.loginstatus = !user.loginstatus"
>
    
</button>
      
        <div class="container">
            <div class="content">
              <h1 style="color: #e91e63;">记录</h1>
              <p style="color: #9c27b0;">里面啥也没有</p>
        </div>
        <div class="leaderboard">  
            <h2 class="title">排行榜</h2>  
            <ul class="article-list">  
              <li v-for="article in leaderboard" :key="article.id" class="article-item">  
                <a v-bind:href="'./article/'+article.id"><h3 class="article-title">{{ ellipsis(article.title,15) }}</h3>  </a>
                <p class="article-info">点赞数: {{ article.likes }} |  {{ formatDate(article.buildTime) }}</p>  
              </li>  
            </ul>  
          </div>
          </div>
   
</template>

<script setup lang="ts">
import { useUserStore } from '@/stores/user';
import { ref,onMounted } from "vue"
import axios from 'axios';
import {ellipsis} from '@/utils/util'
import Navbar from '@/components/navbar.vue'; // 引入导航栏组件
import { userInfo } from 'os';
const user = useUserStore();
var my_id: number = user.loginstatus ? user.userInfo.id : -1;

const username = ref('登录/注册');
username.value = user.loginstatus ? user.userInfo.username : '登录/注册';
const loginUrl = ref('login');
loginUrl.value = user.loginstatus ? 'user_center' : 'login';
const userAvatar = ref('');
userAvatar.value = user.loginstatus ? user.userInfo.avatar : '';
const article = ref({
    id: 1,
    title: 'Sample Article',
    buildTime: '2022-01-01',
    likes: 10,
    authorID: 1,
    cover: 'https://picsum.photos/200/300',
    topic:'测试一下效果,huklascdfvsdgvsdgbvdfbfcv cgmfgm gv vhgmnftnfxbadegvwrgbdrndfndrhbdfhbkudp;ogir;lvhdxkuivhdkugvlkusdb,vxkiugvdksbjvhsikoruidhsauifc'
});
const leaderboard = ref([article.value]);
const dialogVisible = ref(false);
function link(url: string) {
    if (url === 'login') {
        window.location.href = url;
    } else
    if (user.loginstatus) {
        window.location.href = url;
    } else {
       dialogVisible.value = true;
    }
}

onMounted(()=>{
    
    axios.get("/api/user/info",{
        id:my_id
    })
    .then(res => {
        console.log(res)
        username.value = res.data.data.username
        userAvatar.value = res.data.data.user_avatar
    })
    .catch(err => {
        console.error(err); 
    })
    axios.get("/api/writer/getLeaderboard").then(res => {
        console.log(res.data)
        leaderboard.value = res.data
    }).catch(err => {
        console.error(err)
    })
})
function formatDate(dateString: string) {  
      const date = new Date(dateString);  
      const year = date.getFullYear();  
      const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始，所以需要加1，并用0填充至两位数  
      const day = String(date.getDate()).padStart(2, '0'); // 日期用0填充至两位数  
      return `${year}-${month}-${day}`;  
    }  
</script>

<style>  
    body {  
        font-family: Arial, sans-serif;  
        margin: 0;  
        padding: 0;  
        background-color: #f4f4f4;  
    }  

    .navbar {  
        background-color: #000;  
        color: #fff;  
        padding: 10px 0;  
        text-align: center;  
        position: relative;
    }  

    .navbar a {  
        color: #fff;  
        text-decoration: none;  
        margin: 0 20px;  
        font-size: 18px;  
    }  

    .navbar a:last-child {  
        margin-right: 10px;  
        position: absolute;
        right: 10px;
    }  

    .content {  
        flex: 70%;
        display: flex;
        justify-content: space-between;
        height: 100vh;
        margin: 1% ;  
        padding: 20px;  
        background-color: #fff;  
        border-radius: 5px;  
        box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);  
    }  

    /* 样式化导航链接的悬停状态 */  
    .navbar a:hover {  
        color: #0074d9;  
    }

    /* 样式化用户头像 */  
   
       .user-avatar img {
        position: absolute;
        top: 10px;
        left: 10px;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        overflow: hidden;
        box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
    }


    /* 排行榜样式 */

    .container {
        display: flex;
       
      }
      
      
      .leaderboard {
        margin-left: 2%;
        margin-top: 4%;
        background-color: #fff;
        width: 12%;
        height: 70vh;  /* 设置容器的固定高度 */
        flex: 7%;
        border-radius: 5px;
        box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
        overflow-y: auto;  /* 添加垂直滚动条 */
        padding: 10px; /* 增加内边距 */
    }
    
    .leaderboard h2 {
        text-align: center;
        color: #00d9ff;
        font-size: 20px;
        margin-bottom: 10px;
    }
    
    .leaderboard ul {
        list-style: none;
        padding: 0;
    }
    
    .leaderboard li {
        margin-bottom: 5px;
    }
    
    .article-item {
        margin-bottom: 10px;
        padding: 10px;
        border: 1px solid #ddd;
        border-radius: 5px;
        background-color: #f5f5f5;
    }
    .article-item a {
        text-decoration: none;
        color: #0074d9;
        font-weight: bold;
        font-size: 18px;
    }
    
    .article-title {
        margin: 0 0 5px 0;
        font-size: 18px;
        font-weight: bold;
    }
    
    .article-info {
        color: #666;
        font-size: 14px;
    }
    
</style>
       